<template>
  <div class="app-container customer-div" style="padding:0">
    <vxe-grid ref='customerListGrid' v-bind="gridOptions"  size="mini" :loading="listLoading">
      <template #form>
        <!--搜索-->
        <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
          <div class="search-div" style="margin-bottom: 20px">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="常用搜索条件" name="1">
                <el-form-item label="客户名称：">
                  <el-input v-model="listQuery.customerName" clearable></el-input>
                </el-form-item>
                <el-form-item label="规模性质：">
                  <el-select v-model="listQuery.newNature" style="width:150px;">
                    <el-option v-for="(item,index) in newNatureList" :key="index" :value="item" :label="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所在地区：">
                  <el-select v-model="listQuery.areaId1" placeholder="请选择省" @change="changeAreaId1" style="width:120px" clearable>
                    <el-option v-for="item in areaList"  :key="item.areaId" :label="item.areaName"  :value="item.areaId" ></el-option>
                  </el-select>
                  <el-select v-model="listQuery.areaId2" placeholder="请选择市" @change="changeAreaId2" v-if="listQuery.areaId1" style="width:120px" clearable>
                    <el-option v-for="item in areaList[areaIndex1]['areaChildList']"  :key="item.areaId" :label="item.areaName"  :value="item.areaId"></el-option>
                  </el-select>
                  <el-select v-model="listQuery.areaId2" placeholder="请选择市" @change="changeAreaId2" v-else style="width:120px" clearable></el-select>
                  <el-select v-model="listQuery.areaId3" placeholder="请选择区" style="width:120px" v-if="listQuery.areaId2" clearable>
                    <el-option v-for="item in areaList[areaIndex1]['areaChildList'][areaIndex2]['areaChildList']"  :key="item.areaId" :label="item.areaName"  :value="item.areaId"></el-option>
                  </el-select>
                  <el-select v-model="listQuery.areaId3" placeholder="请选择区" v-else style="width:120px"></el-select>
                </el-form-item>

                <el-form-item label="品类：" >
                  <el-select v-model="listQuery.goodsName" placeholder="请选择" clearable style="width:150px;">
                    <el-option
                      v-for="(item,index) in goodsNameList"
                      :key="index"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="牌号：" >
                  <el-select v-model="listQuery.goodsSn" filterable placeholder="请选择" clearable>
                    <el-option
                      v-for="item in goodsList"
                      :key="item.goodsSn"
                      :label="item.goodsSn"
                      :value="item.goodsSn">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="客户性质：">
                  <el-select v-model="listQuery.customerQuality" clearable style="width:150px;">
                    <el-option v-for="item in customerQualityList"  :key="item.cddId"  :value="item.cddId" :label="item.cddValue"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="客户分类：">
                  <el-select v-model="listQuery.customerNewType" clearable multiple style="width:150px;">
                    <el-option
                      v-for="item in customerTypeList"
                      :key="item.cddValue"
                      :label="item.cddValue"
                      :value="item.cddValue">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="还需跟进次数：">
                  <el-input v-model="listQuery.monthTrackingNeedNum" type="number" clearable style="width:100px;"></el-input><span style="padding-left:5px">次</span>
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="高级搜索条件" name="2">
                <el-form-item label="客户编号：">
                  <el-input v-model="listQuery.customerNumber" style="width:150px;"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话：">
                  <el-input v-model="listQuery.contactMobile" clearable style="width:150"></el-input>
                </el-form-item>
                <el-form-item label="信息完整度：" v-if="listQuery.tab == 'my'  || listQuery.tab == 'department' || listQuery.tab == 'all'">
                  <el-select v-model="listQuery.completeRate" clearable style="width:150px;">
                    <el-option  key="full"  value="full" label="100%完成"></el-option>
                    <el-option  key="part"  value="part" label="没有完成"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="客户标签：" >
                  <el-select v-model="listQuery.tagIds" clearable multiple>
                    <el-option
                      v-for="item in tagIdList"
                      :key="item.tagId"
                      :label="item.tagName"
                      :value="item.tagId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排序：" >
                  <el-select v-model="listQuery.orderBy" clearable>
                    <el-option label="按年拜访次数降序" value="yearVisitNumDesc"></el-option>
                    <el-option label="按年拜访次数升序" value="yearVisitNumAsc"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="负责人：" v-if="listQuery.type != 'my'||listQuery.tab=='department'">
                  <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable style="width:150px;">
                    <el-option
                      v-for="item in userOptionList"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="未跟进天数：">
                  <el-input v-model="listQuery.notTrackingTime" type="number" clearable style="width:80px;"></el-input><span style="padding-left:5px">天</span>
                </el-form-item>
                <el-form-item label="未成交天数：" v-if="listQuery.tab != 60 && listQuery.tab != 90">
                  <el-input v-model="listQuery.unOrderDays" type="number" clearable style="width:80px;"></el-input><span style="padding-left:5px">天</span>
                </el-form-item>
                <el-form-item label="本年拜访次数：" >
                  <el-select v-model="listQuery.yearVisitNum" placeholder="请选择" clearable multiple>
                    <el-option label="1次" value="1"></el-option>
                    <el-option label="2次" value="2"></el-option>
                    <el-option label="3次" value="3"></el-option>
                    <el-option label="4次" value="4"></el-option>
                    <el-option label="5次" value="5"></el-option>
                    <el-option label="5次以上" value="5More"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="最近跟进时间：">
                  <el-date-picker
                    v-model="listQuery.lastTrackingTime"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="最近成交时间：">
                  <el-date-picker
                    v-model="listQuery.lastOrderTime"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="创建时间：">
                  <el-date-picker
                    v-model="listQuery.customerCreateTime"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="负责时间：">
                  <el-date-picker
                    v-model="listQuery.chargeStartTime"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="关注时间：">
                  <el-date-picker
                    v-model="listQuery.focusOnTime"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="下次跟进时间：">
                  <el-date-picker
                    v-model="listQuery.nextContactTime"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>

              </el-collapse-item>
            </el-collapse>
            <div style="text-align: right;padding-top:12px;">
              <el-button
                size="small"
                @click="handleSearchList()"
                type="primary">
                查询
              </el-button>
              <el-button
                size="small"
                v-if="listQuery.tab == 'my'"
                @click="toAddCustomer()"
                type="primary">
                新增客户
              </el-button>
              <!-- <el-button
                v-if="listQuery.tab == 'department' || (listQuery.tab == '60' && listQuery.type == 'all')"
                @click="bathYq()"
                type="primary">
                批量延期
              </el-button> -->
              <el-button
                size="small"
                @click="showQuit('','more')"
                type="primary">
                批量转移
              </el-button>
            </div>
          </div>
        </el-form>
      </template>
      <template #pager>
        <div style="overflow: hidden">
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :current-page.sync="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              :page-sizes="[10,15,20]"
              :total="count">
            </el-pagination>
          </div>
        </div>
      </template>
      <template #toolbar_buttons>
        <div v-if="listQuery.tab != 60">
          <el-radio-group  size="small" v-model="listQuery.stepId" @change="handleSearchList">
            <el-radio-button label="" >全部({{num[0]}})</el-radio-button>
            <el-radio-button :label="item.stepId" v-for="item in stepList" :key="item.stepId">{{ item.stepName }}({{num[item.stepId]}})</el-radio-button>
          </el-radio-group>
        </div>
      </template>

      <template #num1_default="{ row, rowIndex }">
        <el-link @click="toDetail(row)" type="primary" style="white-space: normal;">
          {{row.customerNumber}}
        </el-link>
        <!--是否有权限-->
        <div v-if="row.isShowCustomerName" style="white-space: normal;">{{row.customerName}}</div>
        <el-tooltip placement="bottom" effect="light">
          <div slot="content" style="max-width: 400px"> <crm-tag :item="item" v-for="item in row.customerTag" :key="item.tagName" style="margin-bottom:4px;margin-right:4px"></crm-tag></div>
          <div style="padding:0 10px;width:160px; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;text-align: left">
            <crm-tag :item="item" v-for="item in row.customerTag" :key="item.tagName" style="margin-bottom:4px;margin-right:4px"></crm-tag>
          </div>
        </el-tooltip>
      </template>

      <template #num2_default="{ row, rowIndex }">
        <div v-if="row.isShowCustomerName">
          <div v-for="(item,index) in row.sonName" :key="index" style="line-height: 16px;white-space: normal;">
            {{ item }}
          </div>
        </div>
        <div v-else>
          <div v-for="(item,index) in row.sonCustomerNumber" :key="index" style="line-height: 16px;white-space: normal;">
            {{ item }}
          </div>
        </div>

      </template>

      <!-- <template #num3_default="{ row, rowIndex }">
        <span>{{row.applyState | fifApply}}</span>
      </template> -->

      <template #num5_default="{ row, rowIndex }">
        <span v-if="row.isNearPlanEnd==1" style="color: red;">{{ row.trackingNumPerMonth }}</span>
        <span v-else>{{ row.trackingNumPerMonth }}</span>
      </template>

      <template #aboutPerProfit_default="{ row, rowIndex }">
          <span :style="{'color':row.isSaleProfit == 1 ? 'red' :'#606266'}">{{row.aboutPerProfit}}</span>
      </template>

      <template #aboutBuyNum_default="{ row, rowIndex }">
        <span :style="{'color':row.isShipNum == 1 ? 'red' :'#606266'}">{{row.aboutBuyNum}}</span>
      </template>

      <template #num4_default="{ row, rowIndex }">

         <el-popover
          v-if="listQuery.type=='my'&&listQuery.tab!='60'"
          placement="bottom"
          width="280"
          trigger="click">
          <el-table :data="row.contactList" @row-click="callContact" empty-text="暂无联系人">
            <el-table-column width="100" property="contactName" label="联系人">
               <template v-slot="{row}">
                 <span class="pointerStyle">{{ row.contactName }}</span>
               </template>
            </el-table-column>
            <el-table-column width="150" property="contactMobile" label="电话">
              <template v-slot="{row}">
                 <span class="pointerStyle">{{ row.contactMobile }}</span>
               </template>
            </el-table-column>
          </el-table>
          <el-button type="text" size="mini" slot="reference">外呼</el-button>
        </el-popover>

        <el-button
          v-if="listQuery.tab == '60' || listQuery.tab == 'all' || (listQuery.tab == 'department'&& row.isOutNinety)"
          type="text"
          size="mini"
          @click="showQuit(row,'one')">转移
        </el-button>

        <el-button
          v-if="listQuery.tab == 'my' || listQuery.tab=='need'|| listQuery.tab=='monthVisit'||listQuery.tab=='monthTracking'"
          type="text"
          size="mini"
          @click="showGj(row,'add')">新增跟进
        </el-button>

<!--        <el-button-->
<!--          v-if="listQuery.tab == 'my'||listQuery.tab == 'all' "-->
<!--          type="text"-->
<!--          size="mini"-->
<!--          @click="showSetting(row)">设置-->
<!--        </el-button>-->

        <el-button
          v-if="listQuery.tab == 'my'&&row.isCanZTrade == 1"
          type="text"
          size="mini"
          @click="matchmaking(row)">撮合
        </el-button>

        <el-button
          v-if="listQuery.type != 'my' && addSaleWorkOrder"
          type="text"
          size="mini"
          @click="workOrder(row)">发布工单
        </el-button>

        <el-button
          v-if="listQuery.tab == 'department' && row.isOutNinety && row.applyState == 10"
          type="text"
          size="mini"
          @click="showCheck(row)">延期审核
        </el-button>

        <el-button
          type="text"
          size="mini"
          @click="showGjList(row)">跟进记录
        </el-button>

        <el-button
          v-if="listQuery.tab == 'my' && listQuery.type == 'my' && row.isEdit == 1"
          type="text"
          size="mini"
          @click="showEdit(row)">修改
        </el-button>

        <el-button
          v-if="listQuery.type != 'my'"
          type="text"
          size="mini"
          @click="manageFms(row)">管理跟进
        </el-button>

        <el-button
          v-if="listQuery.type == 'my'"
          type="text"
          size="mini"
          @click="changeFocusOn(row)">
          {{row.isFocusOn == 1 ? '移除关注' : '重点关注'}}
        </el-button>

      </template>
    </vxe-grid>


    <!--新增跟进-->
    <addGj ref="addGj" @getList="getList"></addGj>


    <!--转移-->
    <!-- <moveCutomer ref="moveCutomer" @getList="getList"></moveCutomer> -->

    <!--跟进记录-->
    <popFollow ref="popFollow"></popFollow>

    <!--设置-->
    <settingCustomer ref="settingCustomer" @getList="getList"></settingCustomer>

    <!--延期审核-->
    <el-dialog title="延期审核" :visible.sync="dialogVisible" width="450px">
      <el-form label-width="100px"  size="small">
        <el-form-item label="客户名称:">
            {{yqForm.customerName}}
        </el-form-item>
        <el-form-item label="延期原因:" >
            {{yqForm.applyReason}}
        </el-form-item>
        <el-form-item label="申请时间:">
           {{yqForm.time}}
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkYq(2)" type="danger">审核拒绝</el-button>
        <el-button type="primary" @click="checkYq(1)">审核通过</el-button>
      </span>
    </el-dialog>

    <!-- 直接外呼 -->
    <outboundCall ref="outboundCallRef"></outboundCall>
    <!-- 转移 -->
    <cmsTransfer ref="cmsTransfer" @update="getList"></cmsTransfer>



    <!-- 管理跟进 -->
    <addManageFms ref="addManageFms"></addManageFms>

    <!--修改-->
    <el-dialog title="客户修改" :visible.sync="dialogVisible2" width="450px">
     <el-form label-width="100px" ref="form" size="small" :model="editForm" :rules="rules">
       <el-divider>修改前客户信息</el-divider>
       <el-form-item label="客户性质:" style="margin-bottom: 0">
           {{cutItem.customerQualityStr}}
       </el-form-item>
       <el-form-item label="客户规模:" style="margin-bottom: 0">
         {{cutItem.newScale}}
       </el-form-item>
       <el-form-item label="规模性质:"  style="margin-bottom: 0">
          {{cutItem.newNature}}
       </el-form-item>
       <el-form-item label="客户分类:"  style="margin-bottom: 0">
         {{cutItem.customerNewType}}
       </el-form-item>
       <el-divider>修改后客户信息</el-divider>
       <el-form-item label="规模性质：" prop="afterNewNature">
         <el-select v-model="editForm.afterNewNature" @change="changenewNature">
           <el-option v-for="(item,index) in newNatureList" :key="index" :value="item" :label="item"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="客户性质：" prop="afterCcdId">
         <el-select v-model="editForm.afterCcdId">
           <el-option v-for="item in customerQualityList"  :key="item.cddId"  :value="item.cddId" :label="item.cddValue" :disabled="editForm.afterNewNature == 'Z2(撮合)' && item.cddId == '108'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="客户规模：" prop="afterNewScale" >
         <el-select v-model="editForm.afterNewScale"  >
           <el-option v-for="(item,index) in newScaleList" :key="index" :value="item" :label="item"></el-option>
         </el-select>
       </el-form-item>

       <el-form-item label="客户分类：" prop="afterCustomerNewType">
         <el-select v-model="editForm.afterCustomerNewType" clearable :disabled="editForm.afterNewNature == 'Z2(撮合)'">
           <el-option
             v-for="item in customerTypeList"
             :key="item.cddValue"
             :label="item.cddValue"
             :value="item.cddValue">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="客户分类：" prop="afterCustomerNewType">
         <el-select v-model="editForm.afterCustomerNewType" clearable :disabled="editForm.afterNewNature == 'Z2(撮合)'">
           <el-option
             v-for="item in customerTypeList"
             :key="item.cddValue"
             :label="item.cddValue"
             :value="item.cddValue">
           </el-option>
         </el-select>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="handleClose2" >取 消</el-button>
       <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">提 交</el-button>
     </span>
   </el-dialog>

    <!-- 发布工单 -->
    <addWorkOrder ref="addWorkOrder"></addWorkOrder>

  </div>
</template>
<script>
import {
  getCustomerOption,
} from '@/api/partner';
import {
  trackingCustomerList,
  aduApply,
  bathApply,
  setApply,
  getBrandAndGoodsSn,
  getCustomerInfoAPI,
  editCustomer,
  tagConfigList,
  commonClassList
} from '@/api/company';
import {getConfigList,addZTradeTracking,orderGoodsList} from '@/api/partner'
import {editCustomerInfo} from '@/api/fms';
import outboundCall from './outboundCall.vue'
import {formatDate} from '@/utils/date';
import store from '@/store';
import "@/utils/jQuery.print";
import { mapGetters } from 'vuex';
import addGj from './addGj';
import popFollow from './popFollow';
import moveCutomer from './moveCutomer';
import settingCustomer from './settingCustomer';
import cmsTransfer from '@/views/cms/components/cmsTransfer.vue';
import addWorkOrder from '@/views/components/addWorkOrder';
import addManageFms from './addManageFms';
import crmTag from "@/views/components/crmTag";
const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  type:'',
  tab: '',
  isToday:0,
  lastTrackingTime: null,
  lastOrderTime:null,
  customerName:null,
  userId: null,
  isOrder:null,
  stepId:'',
  notTrackingTime:'',
  unOrderDays:'',
  newLevel:'',
  //nearEndDayNum: '',//是否临近宽带
  monthTrackingNum: '',//已跟进次数
  monthTrackingNeedNum:'',//还需跟进次数
  areaId1: '',//省ID
  areaId2: '',//市
  areaId3:'',//区
  customerCreateTime:[],//创建时间搜索
  chargeStartTime: [],//负责时间搜索
  goodsLineId: '',//产品线ID搜索
  goodsSn:'',//牌号搜索
  contactMobile: '',//联系人的电话搜索
  customerQuality:'',//客户性质
  completeRate:'',//信息完整度
  customerNumber: '',
  nextContactTime: [],//下次跟进时间
  isSpecialMobile:'',//特殊号码筛选
  categoryId:'',
  brandId:'',
  brandName:'',
  sapGoodsNo:'',
  categoryName:'',
  goodsName:'',
  isOrderGoods:'',
  isSaleProfit:'',
  isShipNum:'',
  customerNewType:[],
  newNature:'',
  tagIds:[],
  focusOnTime:[],
  yearVisitNum:[]
};
const defaultForm={
  deliverId: '',
  goodsReceipt: [],
  goodsReceiptRemark: '',
  goodsReceiptDate:''
};
const defaultyqForm={
  dataId: '',
  applyReason: '',
  type: '',
  customerName:'',
  time:''
};
// const defaultsqForm={
//   dataId: '',
//   customerName:'',
//   applyReason: '',
// };

const defaultEditForm={
  "customerId": "", //客户ID
  "afterCcdId": '', //修改后客户性质ID
  "afterNewScale": "", //修改后规模
  "afterNewNature": "", //修改后规模性质
  afterCustomerNewType:'',//修改后客户分类
};

export default {
  name: "customerList",
  props: {
    stepList:{
      type: Array,
      default:()=>[]
    },
    areaList:{
      type: Array,
      default:()=>[]
    },
    customerLevelList:{
      type: Array,
      default:()=>[]
    },
    goodsLineList:{
      type: Array,
      default:()=>[]
    },
    userOptionList:{
      type: Array,
      default:()=>[]
    },
    customerQualityList: {
      type: Array,
      default:()=>[]
    },
    categoryList: {
      type: Array,
      default:()=>[]
    },
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value<=0) {
        callback(new Error('天数不得小于0'));
      } else {
        callback();
      }
    };
    const isvalidatecustomerNewType = (rule, value, callback) => {
      console.log(value)
      console.log(this.editForm)
      if (!value && this.editForm.afterNewNature != 'Z(撮合)' && this.editForm.afterCcdId != '108') {
        callback(new Error('请选择客户分类'))
      } else {
        callback()
      }
    };
    return {
      areaIndex1:null,
      areaIndex2: null,
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      categoryLoading:false,
      tableData: [],
      count: 0,
      listLoading: false,
      roles:store.getters.roles ? store.getters.roles : [],
      multipleSelection:[],
      dialogVisible:false,
      // dialogVisible2:false,
      form: JSON.parse(JSON.stringify(defaultForm)),
      btnLoading: false,
      btnLoading3:false,
      yqForm:JSON.parse(JSON.stringify(defaultyqForm)),
      // sqForm:JSON.parse(JSON.stringify(defaultsqForm)),
      num: {},
      gridOptions:{
        border: true,
        id: 'customerList',
        align: 'center',
        maxHeight:'900px',
        rowConfig: {
          keyField: 'dataId',
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
          slots: {
            buttons: 'toolbar_buttons',
          },
          className:'mytoolbar',
        },
        columns: [
          { type: 'checkbox',
            title: '',
            fixed:'left',
            width: 50,
          },
          {
            field: 'customerNumber',
            fixed:'left',
            title: '客户编号',
            width: 200,
            slots: {
              // 使用插槽模板渲染
              default: 'num1_default',
            }
          },
          {
            field: 'sonName',
            title: '子客户',
            width: 200,
            slots: {
              // 使用插槽模板渲染
              default: 'num2_default',
            }
          },
          // {
          //   field: 'nearEndDayNum',
          //   title: '最近跟进带宽到期天数',
          //   width: 200,
          // },
          {
            field: 'validTrackingNum',
            title: '已跟进次数',
            width: 100
          },
          {
            field: 'monthTrackingNeedNum',
            title: '还需跟进次数',
            width: 100
          },
          {
            field: 'yearVisitNum',
            title: '本年拜访次数',
            width: 100
          },
          {
            field: 'goodsLineNames',
            title: '产品线',
            width: 150,
          },
          {
            field: 'stepName',
            title: '开发阶段',
            width: 100,
          },
          {
            field: 'customerNewType',
            title: '客户分类',
            width: 100,
          },
          {
            field: 'newNature',
            title: '规模性质',
            width: 100,
          },
          {
            field: 'customerQualityStr',
            title: '客户性质',
            width: 100,
          },

          {
            field: 'userName',
            title: '客户负责人',
            width: 100,
          },
          {
            field: 'subChargeNames',
            title: '客户协助人',
            width: 150,
          },
          {
            field: 'diffChargeDays',
            title: '持有天数',
            width: 110,
          },
          {
            field: 'lastTrackingTime',
            title: '最近跟进时间',
            width: 130,
          },
          {
            field: 'nextContactTime',
            title: '下次跟进时间',
            width: 130,
          },
          {
            field: 'lastVisitTime',
            title: '最近拜访时间',
            width: 130,
          },
          {
            field: 'myTrackingNum',
            title: '当前负责人跟进总数',
            width: 130,
          },
          {
            field: 'myContactNum',
            title: '当前负责人日常跟进 ',
            width: 130,
          },{
            field: 'myVisitNum',
            title: '当前负责人拜访跟进 ',
            width: 130,
          },{
            field: 'myOrderNum',
            title: '当前负责人成交跟进数',
            width: 140,
          },
          {
            field: 'allTrackingNum',
            title: '跟进总数 ',
            width: 130,
          },
          {
            field: 'allContactNum',
            title: '日常跟进总数',
            width: 130,
          },
          {
            field: 'allVisitNum',
            title: '拜访跟进总数',
            width: 130,
          },
          {
            field: 'allOrderNum',
            title: '成交跟进总数',
            width: 130,
          },
          {
            field: 'lastOrderTime',
            title: '最近成交时间',
            width: 130,
          },

          {
            field:'inquiryPriceCount',
            title:'本月询盘次数',
            width: 110,
          },
          {
            fixed:'right',
            field:'completeRate',
            title:'客户信息完成度',
            width: 110,
          },
          {
            fixed:'right',
            field:'trackingNumPerMonth',
            title:'跟进带宽(次/月)',
            width: 110,
            slots: {
              // 使用插槽模板渲染
              default: 'num5_default',
            }
          },
          {
            fixed:'right',
            field:'',
            title:'操作',
            width:150,
            slots: {
              // 使用 JSX 渲染
              default: 'num4_default',
            },
          },
        ],
        data:[],
      },
      goodsList:[],
      dialogVisible2:false,
      editForm:JSON.parse(JSON.stringify(defaultEditForm)),
      newScaleList:[],//客户规模
      newNatureList:[],//规模性质
      btnLoading2:false,
      cutItem:'',
      customerTypeList:[],
      tagIdList:[],
      goodsNameList:[],
      activeNames:['1','2']
    }
  },

  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    addSaleWorkOrder(){
      if(this.roles.indexOf("addSaleWorkOrder") != -1){
        return true
      }else{
        return false
      }
    },
    rules:function () {
      return {
        afterCustomerNewType:[{
          required: this.editForm.afterNewNature != 'Z(撮合)' && this.editForm.afterCcdId != '108' && this.editForm.afterNewNature != 'Z2(撮合)' ,
          trigger: 'change',
          message: '请选择客户分类'}],
          afterCcdId: [{ required: true, message: '请选择客户性质', trigger: 'change' }],
          afterNewScale: [{ required: this.editForm.afterNewNature != 'Z2(撮合)' ,
            message: '请选择客户规模',
            trigger: 'change' }],
      }
    }
  },
  created() {
  },
  filters: {
  },
  components : {
    addGj,
    moveCutomer,
    popFollow,
    settingCustomer,
    outboundCall,
    cmsTransfer,
    addWorkOrder,
    addManageFms,
    crmTag
  },
  methods: {
    changeFocusOn(item){
      editCustomerInfo({customerId:item.customerId,isFocusOn:item.isFocusOn == 1 ? 0 :1}).then((res)=>{
        this.$message.success('操作成功！')
        this.getList()
      })
    },
    getSelConfigList(){
      tagConfigList().then((res)=>{
        this.tagIdList = res
      })
      commonClassList().then((res)=>{
        this.goodsNameList = res
      })
      orderGoodsList().then((res)=>{
        this.goodsList = res.list
      })
    },
    changenewNature(){
      this.editForm.afterCustomerNewType = ''
      this.editForm.afterCcdId = ''
    },
    //提交工单
    workOrder(row){
      this.$refs.addWorkOrder.showPop('customerList',row.customerId,row.customerName,row.userName)
    },
    //管理跟进
    manageFms(item){
        this.$refs.addManageFms.showDetail(item)
    },
    //撮合
    matchmaking(item){
      addZTradeTracking({customerId:item.customerId}).then((res)=>{
        this.$message({
          type: "success",
          message: "已生成一条撮合成交记录!",
        });
        this.getList()
      })
    },
    //获取订单分类列表
    getCustomerType(){
      getConfigList({status:1}).then((res)=>{
        let customerType = res.find((el)=>{
          return  el.cdtCode == 'customer_new_type'
        })
        this.customerTypeList = customerType ? customerType.data : []
      })
    },

    // 获取客户信息配置
    getCustomerInfo() {
      getCustomerInfoAPI({tab: 1}).then((res) => {
        this.newScaleList = res;
      })
      getCustomerInfoAPI({tab: 2}).then((res) => {
        this.newNatureList = res;
      })
    },

    handleClose2(){
      this.dialogVisible2 = false
    },

    handleConfirm2(){
      this.$refs.form.validate((valid) => {
        if(valid){
          this.btnLoading2 = true;
          editCustomer(this.editForm).then((res)=>{
            this.$message({
              type: 'success',
              message: '客户修改申请已提交!'
            });
            this.btnLoading2 = false;
            this.handleClose2()
          }).catch(()=>{
            this.btnLoading2 = false;
          })
        }
      })

    },

    showEdit(item){
        this.dialogVisible2 = true
        this.cutItem = item
        this.getCustomerInfo()
        // this.getCustomerType()
        this.editForm = JSON.parse(JSON.stringify(defaultEditForm))
        this.editForm.customerId = item.customerId
        this.editForm.afterCcdId = item.customerQuality
        this.editForm.afterNewScale = item.newScale
        this.editForm.afterNewNature = item.newNature
        this.editForm.afterCustomerNewType = item.customerNewType
    },

    // 客户外呼
    callContact(row) {
      this.$refs.outboundCallRef.showPop(row)
    },
    //切换省
    changeAreaId1(item) {
        this.areaIndex1 = this.areaList.findIndex((el)=>{
          return item == el.areaId
        });
        this.areaIndex2 = null;
        this.listQuery.areaId2 = '';
        this.listQuery.areaId3 = '';
    },
    //切换市
    changeAreaId2(item){
      this.areaIndex2 = this.areaList[this.areaIndex1]['areaChildList'].findIndex((el)=>{
        return item == el.areaId
      });
      this.listQuery.areaId3 = '';
    },
    toAddCustomer() {
      this.$router.push({name:'addCustomerPL'})
    },
    //批量延期
    bathYq(){
      let list = this.$refs.customerListGrid.getCheckboxReserveRecords();
      let list2 = this.$refs.customerListGrid.getCheckboxRecords();
      let records = JSON.parse(JSON.stringify(list.concat(list2)));
      if(records.length == 0){
          this.$message({type:'error',message:'请先选择客户'})
          return false
        }
      this.$confirm('确认将这些客户延期90天？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let dataIds = [];
        records.forEach((el)=>{
          dataIds.push(el.dataId)
        })
        bathApply({ dataIds: dataIds }).then((res) => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.getList();
        })
      }).catch(() => {

      });
    },

    //显示审延期审核
    showCheck(item){
      this.dialogVisible = true
      this.yqForm = JSON.parse(JSON.stringify(defaultyqForm))
      this.yqForm.dataId = item.dataId;
      this.yqForm.applyReason = item.applyReason;
      this.yqForm.customerName = item.customerName;
      this.yqForm.time = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
    },

    //审核
    checkYq(type){
        this.dialogVisible = false;
        this.yqForm.type = type;
        aduApply(this.yqForm).then(()=>{
           this.$message({type:'success',message:'操作成功！'})
            this.getList()
      })
    },

    //显示跟进记录
    showGjList(item){
      this.$refs.popFollow.showPop(item.dataId,this.listQuery.type)
    },

    //显示设置(需回显)
    showSetting(item){
      this.$refs.settingCustomer.showPop(item)
    },
    showQuit(row,type) {
      let list = this.$refs.customerListGrid.getCheckboxReserveRecords();
      let list2 = this.$refs.customerListGrid.getCheckboxRecords();
      let records = JSON.parse(JSON.stringify(list.concat(list2)));
       if(type == 'more' && records.length == 0){
        this.$message({type:'error',message:'请先选择客户'})
        return false
       } else if (type == 'more') {
        let isCharge=records[0].isCharge
        this.$refs.cmsTransfer.showPop(records,type,isCharge)
      }else{
        this.$refs.cmsTransfer.showPop(row.customerId,type,row.isCharge)
      }
    },
    //转移
    showMove(item,type){
      let list = this.$refs.customerListGrid.getCheckboxReserveRecords();
      let list2 = this.$refs.customerListGrid.getCheckboxRecords();
      let records = JSON.parse(JSON.stringify(list.concat(list2)));
      if(type == 'more' && records.length == 0){
        this.$message({type:'error',message:'请先选择客户'})
        return false
      }else if(type == 'more'){
        this.$refs.moveCutomer.showPop(records,type)
      }else{
        this.$refs.moveCutomer.showPop([item],type)
      }
    },
    //新增跟进
    showGj(item,type){
      this.$refs.addGj.showTracking(item,type,this.listQuery.type)
    },
    //多选表格项
    // handleSelectionChange(val) {
    //   console.log("val",val)
    //   this.multipleSelection = val;
    //
    // },

    init(tab, type) {
      this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
      this.listQuery.tab = tab;
      this.listQuery.type = type;
      this.gridOptions.columns = this.gridOptions.columns.filter(column => column.field !== 'hasTackingNum' && column.field !== 'missTrackingNum' && column.field !== 'needTrackingNum');
      this.$refs.customerListGrid.refreshColumn();
      if(tab == 'monthTracking'){
        let newColumn1 = { field: 'hasTackingNum', title: '已跟进',width:100 };
        let newColumn2 = { field: 'missTrackingNum', title: '已错过',width:100 };
        let newColumn3 = { field: 'needTrackingNum', title: '剩余跟进',width:100 };
        this.gridOptions.columns.push(newColumn1,newColumn2,newColumn3);
        this.$refs.customerListGrid.refreshColumn();
      }
      if(this.$route.query.monthTrackingNeedNum){
        this.listQuery.monthTrackingNeedNum = this.$route.query.monthTrackingNeedNum;
      }
      if(this.$route.query.notTrackingTime){
        this.listQuery.notTrackingTime = this.$route.query.notTrackingTime;
      }
      this.tableData = [];
      this.count = 0;
      this.getList();
      this.getCustomerType()
      this.getCustomerInfo()
      this.getSelConfigList()
    },


    //去客户详情页
    toDetail(item) {
      let routeData = this.$router.resolve({name:'customerDetail',query:{id:item.customerId}});
      window.open(routeData.href);
    },

    //客户名称输入匹配
    querySearch(queryString, cb){
      getCustomerOption({keywords:queryString}).then((res)=>{
        cb(res);
      })
    },


    //选择客户名称
    handleSelectCustomerName(item){
      this.listQuery.customerName = item.customerName
    },


    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      // this.multipleSelection = [];
      // this.$refs.moreTable.clearSelection()
      if(this.listQuery.isOrderGoods !== '' && !this.listQuery.categoryId){
              this.$message({
                type: 'error',
                message: '请选择品类'
              });
              return false
      }
      this.$refs.customerListGrid.clearCheckboxRow(false);
      this.$refs.customerListGrid.clearCheckboxReserve()
      this.listLoading = true;
      trackingCustomerList(this.listQuery).then(response => {
        this.gridOptions.data = response.list;
        // this.tableData = response.list;
        this.count = response.count;
        this.num = response.num;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },

  //显示确认延期
    // oneyq(item) {
    //   this.$confirm('确认将此客户延期90天?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     let dataIds = [];
    //     dataIds.push(item.dataId)
    //     bathApply({ dataIds: dataIds }).then((res) => {
    //       this.$message({
    //         type: 'success',
    //         message: '操作成功!'
    //       });
    //       this.getList();
    //     })
    //   }).catch(() => {

    //   });
    // },


    //显示申请延期
    // showYq(item){
    //   this.dialogVisible2 = true;
    //   this.sqForm.dataId = item.dataId;
    //   this.sqForm.customerName = item.customerName;
    //   this.sqForm.applyReason = ''
    // },
    // handleClose2(){
    //   this.dialogVisible2 = false;
    // },
    // handleConfirm2(){
    //   this.$refs.form.validate(async (valid) => {
    //     if (valid) {
    //       this.btnLoading = true;
    //       setApply(this.sqForm).then((res)=>{
    //         this.btnLoading = false;
    //         this.handleClose2();
    //         this.$message({
    //           type: "success",
    //           message: "操作成功!",
    //         });
    //         this.getList()
    //       }).catch(()=>{
    //         this.btnLoading = false;
    //       })
    //     } else {
    //       return false;
    //     }
    //   })
    // },


  },
}
</script>
<style scoped lang="scss">
.pointerStyle:hover{
  cursor: pointer;
}
</style>



